<%--
  Created by IntelliJ IDEA.
  User: c
  Date: 2018/8/23
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>预约记录列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../frame/layui/css/modules/layer/default/layer.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title">
    <legend>查看预约记录</legend>
</fieldset>

<div class="tail">
    <div class="head">
        <div class="my-btn-box" style="margin-left: 50px; float: right">
            <a href="../reservationrecord/addReservationRecord.jsp" style="color: white;">
                <button class="layui-btn layui-btn-sm">新增预约</button>
            </a>
            <div style="height: 40px;width: 600px;float: left;align-content: center" id="messageBox"></div>
            <div style="float: right; margin-right: 50px;">
                <span class="fr">
                    <span class="layui-form-label">搜索条件：</span>
                    <div class="layui-input-inline" style="float: right">
                        <input type="text" id="sousuo" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
                    </div>
                    <button class="layui-btn mgl-20" onclick="queryByKey()" style="float: right">查询</button>
                </span>
            </div>
        </div>
        <hr/>
    </div>
</div>

<table class="layui-table" lay-skin="line" id="test">
    <colgroup>
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="80">
        <col width="160">
    </colgroup>
    <thead>
    <tr>
        <th>预约编号</th>
        <th>客户姓名</th>
        <th>客户性别</th>
        <th>预约时间</th>
        <th>车牌号码</th>
        <th>手机号码</th>
        <th>服务类型</th>
        <th>预约车型</th>
        <th>下单时间</th>
        <th>处理状态</th>
        <th><center>操作</center></th>
    </tr>
    </thead>
    <tbody id="table_tbody">
    </tbody>
</table>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script src="../frame/layui/lay/modules/layer.js"></script>
<script src="../js/dateToString.js"></script>
<script>
    $(function () {
        // 加载数据
        loadDate("",1);

        // 上一页
        $(".prev").live("click",function () {
            var keyword = $("#sousuo").val();
            // 计算上一页
            var pageNo = $(".current_num").text();
            pageNo = parseInt(pageNo);
            if (pageNo == undefined || pageNo <= 1){
                pageNo = 1;
            }else{
                pageNo = pageNo - 1;
            }
            // 加载数据
            loadDate(keyword,pageNo);
        });
        // 下一页
        $(".next").live("click",function () {
            var keyword = $("#sousuo").val();
            var pageNo = $(".current_num").text();
            pageNo = parseInt(pageNo);
            var totalNo = $(".total_num").text();
            totalNo = parseInt(totalNo);
            if (pageNo == undefined){
                pageNo = 1;
            } else if(pageNo >= totalNo){
                pageNo = totalNo;
            }else{
                pageNo = pageNo + 1;
            }
            // 加载数据
            loadDate(keyword,pageNo);
        });
        // 首页
        $(".first").live("click",function () {
            var keyword = $("#sousuo").val();
            var pageNo = 1;
            // 加载数据
            loadDate(keyword,pageNo);
        });
        // 尾页
        $(".last").live("click",function () {
            var keyword = $("#sousuo").val();
            var pageNo = $(".total_num").text();
            pageNo = parseInt(pageNo);
            if (pageNo == undefined){
                pageNo = 1;
            }
            // 加载数据
            loadDate(keyword,pageNo);
        });
    });
    // 加载数据
    function loadDate(keyword,pageNo) {
        layer.load(1);

        $("#table_tbody").empty();
        $.ajax({
            url: "/ReservationRecord/queryAll",
            type: "POST",
            data: {
                keyword:keyword,// 模糊查询字段
                pageNum:pageNo// 分页参数
            },
            dataType: "json",
            success: function (data) {
                // console.log(data);
                // 获取搜索框并赋值，防止模糊搜索时点击上下页数据恢复
                $("#sousuo").val(keyword);
                // 加载动画
                setTimeout(function(){
                    layer.closeAll('loading');
                }, 200);
                // 判断数据是否查询成功
                if(data.success){
                    var reservationRecords = data.data.list;
                    // 判断是否有数据
                    if(reservationRecords.length>=0) {
                        for (var i = 0; i < reservationRecords.length; i++) {
                            $("#table_tbody").append("" +
                                "<tr>" +
                                "<td>" + reservationRecords[i].resid + "</td>" +
                                "<td>" + reservationRecords[i].resname + "</td>" +
                                "<td>" + reservationRecords[i].ressex + "</td>" +
                                "<td>" + dateToStr(reservationRecords[i].resdate) + "</td>" +
                                "<td>" + reservationRecords[i].resdrand + "</td>" +
                                "<td>" + reservationRecords[i].resphone + "</td>" +
                                "<td>" + reservationRecords[i].serviceLarge.sername + "</td>" +
                                "<td>" + reservationRecords[i].rescarmodel + "</td>" +
                                "<td>" + dateToStr(reservationRecords[i].restime) + "</td>" +
                                "<td>" + isStatus(reservationRecords[i].status,reservationRecords[i].resid) + "</td>" +
                                "<td><center><a href='/reservationrecord/updateReservationRecord.jsp?" + reservationRecords[i].resid + "'>" +
                                "<button class='layui-btn layui-btn-sm'><i class='layui-icon'>&#xe642;</i></button>" +
                                "</a>&nbsp;<a href='javascript:del(" + reservationRecords[i].resid + ");'>" +
                                "<button class='layui-btn layui-btn-sm'><i class='layui-icon'>&#xe640;</i>" +
                                "</button></a></center></td>" +
                                "</tr>");
                        }
                        $("#table_tbody").append("<tr><td colspan='11'></td></tr>" +
                            "<tr style='border-bottom: 1px solid #AAAAAA; height: 50px;text-align: center;'>" +
                            "<td colspan='11'><div id='page_div'>" +
                            "第 <span class='current_num'>" + data.data.pageNum + "</span>页" +
                            "共 <span class='total_num'>" + data.data.pages + " </span>页" +
                            "每页 " + data.data.pageSize + " 条信息" +
                            "共 " + data.data.total + " 条信息" +
                            "&nbsp;&nbsp;<a href='javascript:(0);' class='first'>首页</a>" +
                            "&nbsp;&nbsp;<a href='javascript:(0);' class='prev'>上一页</a>" +
                            "&nbsp;&nbsp;<a href='javascript:(0);' class='next'>下一页</a>" +
                            "&nbsp;&nbsp;<a href='javascript:(0);' class='last'>尾页</a>" +
                            "</div></td></tr>");
                    }else{
                        $("#table_tbody").append("<tr><td colspan='11'><font color='red'>暂无数据，请添加！</font></td></tr>");
                    }
                }else{
                    // 错误提示
                    layer.msg(data.message);
                }
            }
        });
    }

    // 状态显示
    function isStatus(status,resid) {
        if(status == 0){
            return '<a href="/reservationrecord/reservationRecordList.jsp?'+resid+'"><font color="red">待处理</font></a>';
        }else{
            return '已处理';
        }
    }

    // 删除数据
    function del(resid) {
        // 询问提示框
        layer.confirm("是否确认删除？", {
            btn: ['确认', '取消'] //按钮
        }, function(){
            // 点击确认执行此方法
            $.ajax({
                url: "/ReservationRecord/delete",
                type: "POST",
                data: {
                    resid:resid
                },
                dataType: "json",
                success: function (data) {
                    if(data.success){
                        layer.msg(data.message);
                    }else{
                        layer.msg(data.message);
                    }
                }
            });
            window.location.reload();
        }, function(){
            // 此为取消时执行的方法
        });
    }
    // 模糊查询
    function queryByKey() {
        // 获取搜索框的值
        var keyword = $("#sousuo").val();
        loadDate(keyword,1);
    }
    $(document).ready(function(){
        secondAJAX();
        setInterval("secondAJAX()",10000);
    });
    //消息通知
    function secondAJAX(){
        $.ajax({
            url:"/front/contact/get",
            type: "POST",
            cache: false,
            dataType: "json",
            success:function (data) {
                console.log(data)
                var message = data.data[0];
                if(message!= null){
                    $("#messageBox").empty();

                    $("#messageBox").append("<marquee  behavior='alternate' direction='right' loop='infinite'><font size='4' color='#ffc0cb'>【新消息】:有新的预约到达，【"+message+"】,请刷新页面获取</font></marquee>")
                }else{
                    $("#messageBox span").empty();
                    $("#messageBox").empty();
                    $("#messageBox").append("<span ><font size='5'>暂时还没有其他预约消息哦</font></span>");
                }

            }
        });
    }
</script>
</html>
